<template>
  <div class="main-container super-user-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item><i class="el-icon-notebook-2" /> 权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>超级用户</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form :inline="true" size="mini" class="demo-form-inline table-top-bar">
        <el-form-item>
          <el-input v-model="queryInfo.username" placeholder="请输入用户名" clearable @input="searchBtn = false" @clear="search" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" :disabled="searchBtn" @click="search">搜索</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button v-auth="'AddSuperUser'" type="primary" @click="addSuperUserVisible = true">添加用户</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="superUsers" height="580">
        <el-table-column prop="id" label="用户ID" min-width="80" />
        <el-table-column prop="username" label="用户名" min-width="150" />
        <el-table-column prop="nickname" label="昵称" min-width="150" />
        <el-table-column label="角色" min-width="150">
          <template slot-scope="scope">
            <template v-for="role in roles">
              <el-tag v-if="role.id === scope.row.role_id" :key="role.id" type="info">{{ role.nickname }}</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" min-width="100">
          <template slot-scope="scope">
            <template v-if="scope.row.status === 1 || scope.row.status === 0">
              <el-button v-if="scope.row.status === 1" size="mini" type="success" @click="superUserStatus(scope.$index, scope.row, 0, '禁用')">正常</el-button>
              <el-button v-if="scope.row.status === 0" size="mini" type="warning" @click="superUserStatus(scope.$index, scope.row, 1, '启用')">禁用</el-button>
            </template>
            <el-button v-else size="mini" type="info" @click="superUserStatus(scope.$index, scope.row, 1, '恢复')">已删除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" min-width="180" />
        <el-table-column label="操作" min-width="330" fixed="right">
          <template v-if="scope.row.status === 1 || scope.row.status === 0" slot-scope="scope">
            <el-button v-auth="'SetRole'" size="mini" icon="el-icon-edit" :disabled="scope.row.status !== 1" @click="setRole(scope.$index, scope.row)">分配角色</el-button>
            <el-button v-auth="'ResetSuperUserPwd'" size="mini" icon="el-icon-edit" :disabled="scope.row.status !== 1" @click="resetSuperUserPwd(scope.$index, scope.row)">重置密码</el-button>
            <el-button v-auth="'DelSuperUser'" size="mini" type="danger" icon="el-icon-delete" @click="superUserStatus(scope.$index, scope.row, -1, '删除')">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page.sync="queryInfo.pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryInfo.pageRow"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog v-dialogDrag title="添加用户" :visible.sync="addSuperUserVisible" width="30%" :close-on-click-modal="false">
      <add-super-user v-if="addSuperUserVisible" @reset-super-users="resetSuperUsers" />
    </el-dialog>
    <el-dialog v-dialogDrag title="分配角色" :visible.sync="setRoleVisible" width="30%" :close-on-click-modal="false">
      <set-role v-if="setRoleVisible" :set-role-super-user-info="setRoleSuperUserInfo" @reset-super-users="resetSuperUsers" @close-set-role="setRoleVisible = false" />
    </el-dialog>
  </div>
</template>

<script>
import { getSuperUsers, resetSuperUserPwd, statusSuperUser } from '@/api/super_user'
import { getRoles } from '@/api/role'
import AddSuperUser from './components/AddSuperUser'
import SetRole from './components/SetRole'
export default {
  name: 'SuperUser',
  components: { AddSuperUser, SetRole },
  props: {},
  data () {
    return {
      queryInfo: {
        pageIndex: 1,
        pageRow: 10,
        username: ''
      },
      searchBtn: true,
      count: 0,
      superUsers: [],
      roles: [],
      addSuperUserVisible: false,
      setRoleVisible: false,
      setRoleSuperUserInfo: {}
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getSuperUsers()
    this.getRoles()
  },
  mounted () {},
  methods: {
    getSuperUsers: async function () {
      const data = {
        pageIndex: this.queryInfo.pageIndex,
        pageRow: this.queryInfo.pageRow,
        username: this.queryInfo.username
      }
      const res = await getSuperUsers(data)
      if (res.list) {
        this.superUsers = res.list
        this.count = res.count
      }
    },
    getRoles: async function () {
      const data = {
        pageIndex: 1,
        pageRow: 10000,
        rolename: ''
      }
      const res = await getRoles(data)
      if (res.list) {
        this.roles = res.list
      }
    },
    resetSuperUserPwd: async function (index, superUserInfo) {
      const confirm = await this.$confirm(`确定要将 ${superUserInfo.username} 密码重置吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { return true }).catch(() => { return false })
      if (confirm) {
        const data = {
          id: superUserInfo['id']
        }
        await resetSuperUserPwd(data)
        this.$message({ message: '重置成功', type: 'success', duration: 1000 })
      }
    },
    setRole: function (index, superUserInfo) {
      this.setRoleSuperUserInfo = superUserInfo
      this.setRoleVisible = true
    },
    superUserStatus: async function (index, superUserInfo, status, text) {
      const confirm = await this.$confirm(`确定要 ${text} ${superUserInfo.username} 吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { return true }).catch(() => { return false })
      if (confirm) {
        const data = {
          id: superUserInfo.id,
          status: status
        }
        const res = await statusSuperUser(data)
        if (res) {
          this.$message({ message: `${text}成功`, type: 'success', duration: 1000 })
          this.getSuperUsers()
        }
      }
    },
    search: function () {
      this.searchBtn = true
      this.getSuperUsers()
    },
    resetSuperUsers: function () {
      this.setRoleVisible = false
      this.addSuperUserVisible = false
      this.getSuperUsers()
    },
    handleSizeChange(val) {
      this.queryInfo.pageRow = val
      this.getSuperUsers()
    },
    handleCurrentChange(val) {
      this.queryInfo.pageIndex = val
      this.getSuperUsers()
    }
  }
}
</script>

<style scoped lang="scss">
.super-user-container {
  .box-card {
    .super-user-search {
      padding: 15px 0;
      .el-input {
        display: inline-block;
        width: 250px;
      }
      .el-button {
        margin-left: 10px;
      }
    }
  }
}
</style>
